<script setup lang="ts">
import type { NavigationMenuItem } from "@nuxt/ui";
import { ITEMS } from "./const";

const route = useRoute();

const items = computed<NavigationMenuItem[][]>(() => {
  return ITEMS.map((group) => {
    return group.map((item) => {
      return {
        ...item,
        active: route.path.startsWith(item.to),
        defaultOpen: route.path.startsWith(item.to),
      };
    });
  });
});
</script>

<template>
  <div class="flex h-screen w-screen">
    <div class="p-2 border-r border-default">
      <UNavigationMenu
        orientation="vertical"
        :items="items"
        class="data-[orientation=vertical]:w-48"
      />
    </div>
    <main class="flex-1 m-2">
      <slot/>
    </main>
  </div>
</template>
